<template>
  <Model-bg title="成本信息" :width="903" :height="218" :top="19" :bg="1" padding="10px">
    <div class="cost f f-ai-c f-jc-b">
      <div class="cost-item f-1 f">
        <div class="w160 h150">
          <Pie-chart
            cid="cost1"
            :data="dataCount"
            :radius="['65%', '80%']"
            :pad-angle="dataCount.length > 1 ? 5 : 0"
            :legend="false"
            :tooltip="false"
            leg-top="center"
            leg-right="0%"
            label-size="16px"
            :colors="colors"
          />
          <div class="center-label">
            <div>人力、水、电</div>
            <div>材料成本</div>
          </div>
        </div>
        <div class="f-1 ml20 font14 f-col f-jc-a pt20 pb20 b-b">
          <div
            v-for="(i, k) in dataCount"
            :key="k"
            class="legend"
            :style="{
              '--before': colors[k],
            }"
            @click="handleMaterial({ data: i })"
          >
            <span class="ml24 mr16">{{ i.name }}</span>
            {{ i.value }}万元
            <span class="ml10">占比</span>
            {{ ((i.value / (dataNum || 1)).toFixed(4) * 100).toFixed(2) }}%
          </div>
        </div>
      </div>
      <div class="cost-item f-1" @click="handleCost">
        <Line-chart
          cid="cost2"
          :x-axis="xlist"
          :data="dataList"
          :type="['line', 'bar']"
          bar-width="50%"
          smooth
          :tooltip="false"
          leg-right="4%"
          leg-top="0%"
          grid-top="20%"
          :colors="[
            ['#2075F4', '#2075F4'],
            ['#7AA3CC', 'rgba(96,112,128,0.1)'],
          ]"
          unit="单位/万元"
        />
      </div>
    </div>
  </Model-bg>
</template>
<script>
import { mapState } from "vuex";
import { screenCostA, screenCostB } from "@/api/srceen/home";
export default {
  data() {
    return {
      dataCount: [], // 饼图数据
      dataNum: 1, // 总数

      xlist: [],
      dataList: [],
      colors: [
        "#45F4FF",
        "#30C27C",
        "#416BFF",
        "#F0FF95",
        "#FCFCFC",
        "#45F4FF",
        "#30C27C",
        "#416BFF",
        "#F0FF95",
        "#FCFCFC",
      ],
    };
  },
  computed: {
    ...mapState({
      refresh: (state) => state.app.refresh,
    }),
  },
  watch: {
    refresh() {
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      screenCostA().then((res) => {
        if (res.data) {
          this.dataNum = 0;
          let list = res.data.map((i) => {
            this.dataNum += Number(i.value || "0");
            return {
              type: i.type,
              value: Number(i.value || "0"),
              name: i.label,
              color: "#45F4FF",
            };
          });
          this.dataCount = list.filter((i) => i.value > 0);
        }
      });
      screenCostB().then((res) => {
        if (res.data) {
          this.xlist = res.data.xaxis || [];
          this.dataList = [
            {
              data: res.data.target || [],
              name: "目标",
            },
            {
              data: res.data.actual || [],
              name: "成本",
            },
          ];
        }
      });
    },
    // 跳转物料成本
    handleMaterial(e) {
      const { name, type } = e.data;
      if (type === "OTHER") return;
      this.$router.push({
        path: "/srceen/cost-index",
        query: {
          name: encodeURIComponent(name),
          consumeType: type,
        },
      });
    },
    // 跳转成本统计
    handleCost() {
      this.$router.push({
        path: "/srceen/cost-count",
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.cost {
  width: 100%;
  height: 100%;
  &-item {
    height: 100%;
    position: relative;
    overflow: hidden;
    .center-label {
      position: absolute;
      left: 30px;
      top: 38%;
      width: 96px;
      text-align: center;
    }
    #cost1 {
      animation: spin 10s linear infinite;
    }
    @keyframes spin {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
    > div {
      height: 100%;
      color: #fff;
      span {
        color: rgba(255, 255, 255, 0.6);
      }
    }
    .legend {
      --before: "#45F4FF";
      position: relative;
      &:hover {
        cursor: pointer;
        color: #409eff;
        text-decoration: underline;
        span {
          color: #409eff;
        }
      }
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        border: 1px solid var(--before);
      }
      &::after {
        content: "";
        position: absolute;
        left: 3px;
        top: 50%;
        transform: translateY(-50%);
        width: 6px;
        height: 6px;
        background: var(--before);
      }
    }
  }
}
</style>
